<template>
	<view class="partner-extension-wrapper" @click="selectListHide=true">
		<!-- 返回首页 -->
		<uni-bankhome />
		<view class="tab-box">
			<u-tabs name="name" font-size="28" count="cate_count" active-color="#e63214" :list="tabList"
				:is-scroll="false" :current="tabCurrent" @change="tabListChange"></u-tabs>
		</view>
		<view class="content-wrapper" v-show="tabCurrent===0">
			<div class="LA-wrapper">
				<canvas id="canvassss" type="2d" class="canvas" />
			</div>
		</view>
		<view class="content-wrapper" v-if="tabCurrent===1">
			<div class="select-type-wrapper">
				<div class="selected-option" @click.stop="selectListHide=!selectListHide">
					{{membersel[memberindex].name}}
					<u-icon name="arrow-right" color="#dfdfdf"></u-icon>
				</div>
				<div class="select-list" :class="{'hide':selectListHide}">
					<div class="select-item" @click.stop="memberType(index)" :key="item.name"
						:class="{'selected':memberindex===index}" v-for="(item,index) in membersel">
						{{item.name}}
					</div>
				</div>
			</div>
			<view v-if="huiyuanarr.length === 0">
				<u-empty text="暂无数据" mode="list">
				</u-empty>
			</view>
			<div class="vip-list" v-else>
				<div class="vip-person" v-for="item in huiyuanarr">
					<image class="avatar" :src="item.face" mode="aspectFill"></image>
					<div class="info-wrapper">
						<div class="nickname"><span v-if="item.nickName"></span>{{ item.nickName }}<span
								v-if="item.name">({{ item.name }})</span></div>
						<div class="name-phone">
							<div class="name" v-if="item.realName">
								{{ item.realName ? '**' + item.realName.charAt(item.realName.length - 1) :"" }}
							</div>
							<div class="phone" v-if="item.mobile">
								{{ item.mobile ? item.mobile.substr(0, 3) + "****"+ item.mobile.substr(7, 12):"" }}
							</div>
						</div>
						<div class="name-phone">
							<div class="phone" v-if="item.storeName">
								{{ item.storeName }}
							</div>
						</div>
						<div class="deathline"
							v-if="item.endTime && !item.payStatus && new Date().getTime() < new Date(item.endTime).getTime() && new Date().getTime() > new Date(item.endTime).getTime() - 259200000">
							到期：{{ item.endTime }}</div>
					</div>
					<image v-if="item.mobile && item.mobile != ''" class="call" src="/static/icon-phone.png"
						mode="aspectFill" @click="daphone(item.mobile)"></image>
				</div>
				<uni-load-more :status="loadStatus"></uni-load-more>
			</div>
		</view>
		<view class="content-wrapper" v-if="tabCurrent===2">
			<div class="perview-wrapper">
				<div class="item all">
					<image class="bg"
						src="https://rsyl.oss-cn-beijing.aliyuncs.com/d7089b3d7c124840b1e8082083c6d87e.png"
						mode="aspectFill"></image>
					<div class="num" v-if="inconmeData.incomeAll">{{inconmeData.incomeAll|formatWalletTwo}}</div>
					<div class="num" v-if="!inconmeData.incomeAll">0.00</div>
					<div class="text">总收益</div>
				</div>
				<div class="item day">
					<image class="bg"
						src="https://rsyl.oss-cn-beijing.aliyuncs.com/5238cdd47c6e442faff2429c6bfc46de.png"
						mode="aspectFill"></image>
					<div class="num" v-if="inconmeData.incomeDay">{{inconmeData.incomeDay|formatWalletTwo}}</div>
					<div class="num" v-if="!inconmeData.incomeDay">0.00</div>
					<div class="text">今日总收益 </div>
				</div>
			</div>
			<div class="select-type-wrapper">
				<div class="selected-option" @click.stop="selectListHide=!selectListHide">
					{{selectList[selectCurrent].name}}
					<u-icon name="arrow-right" color="#dfdfdf"></u-icon>
				</div>
				<div class="total" v-if="selectCurrent != 0 && inconmeData.income">
					合计：{{inconmeData.income|formatWalletTwo}}
				</div>
				<div class="total" v-if="selectCurrent != 0 && !inconmeData.income">合计：0.00
				</div>
				<div class="select-list" :class="{'hide':selectListHide}">
					<div class="select-item" @click.stop="selectType(index)" :key="item.name"
						:class="{'selected':selectCurrent===index}" v-for="(item,index) in selectList">
						{{item.name}}
					</div>
				</div>
			</div>
			<div class="extension-list" v-if="selectList[selectCurrent].type!=='year'">
				<view v-if="shouyiarr.length === 0">
					<u-empty text="暂无数据" mode="list">
					</u-empty>
				</view>
				<div v-else class="extension-item" v-for="item in shouyiarr">
					<div class="head-wrapper">
						<image class="avatar" :src="item.status == 'O'?item.storeLogo:item.face" mode="aspectFill">
						</image>
						<div class="name" v-if="item.status == 'O'">{{item.storeName||'' }}</div>
						<div class="name" v-else>{{item.nickName||'' }}</div>
						<div class="vip" v-if="item.status == 'O'">(焕商)</div>
						<div class="vip" v-else>{{tem.cardName||'' }}</div>
						<div class="phone" v-if="item.mobile && item.status != 'O'">
							{{ item.mobile ? item.mobile.substr(0, 3) + "****"+ item.mobile.substr(7, 12):"" }}</div>
						<div class="phone" v-if="item.storePhone && item.status == 'O'">
							{{ item.storePhone ? item.storePhone.substr(0, 3) + "****"+ item.storePhone.substr(7, 12):"" }}
						</div>
					</div>
					<div class="body-wrapper" v-if="userinfo.partnerType == 1 || userinfo.partnerType == 2">
						<div class="left">
							<div class="method" v-if="item.status && item.status == 'Y'">
								<div class="type">会员费：</div>
								<div class="num" v-if="item.payerMoney">{{ item.payerMoney|formatWalletTwo }}</div>
							</div>
							<div class="method" v-if="item.status && item.status == 'Z'">
								<div class="type">转账额：</div>
								<div class="num" v-if="item.payerMoney">{{ item.payerMoney|formatWalletTwo }}</div>
							</div>
							<div class="method" v-if="item.status && item.status == 'O'">
								<div class="type">订单额：</div>
								<div class="num" v-if="item.payerMoney">{{ item.payerMoney|formatWalletTwo }}</div>
							</div>
							<div class="method" style="align-items: center;">
								<div class="type">订单号：</div>
								<div class="num" v-if="item.sn" style="font-size: 24rpx;">{{ item.sn }}</div>
							</div>
							<div class="time" v-if="item.createTime">交易时间：{{ item.createTime }}</div>
						</div>
						<div class="right">
							<div class="money" v-if="item.payeeMoney">
								<span
									v-if="Number(item.payeeMoney)>0">+{{ Number(item.payeeMoney)|formatWalletTwo }}</span>
								<span v-else>{{ Number(item.payeeMoney)|formatWalletTwo }}</span>
							</div>
						</div>
					</div>
					<div class="body-wrapper" v-else>
						<div class="left">
							<div class="method" v-if="item.status && item.status == 'Y'">
								<div class="type">会员费：</div>
								<div class="num" v-if="item.payerMoney">{{ item.payerMoney|formatWalletTwo }}</div>
							</div>
							<div class="method" v-if="item.status && item.status == 'Z'">
								<div class="type">转账额：</div>
								<div class="num" v-if="item.payerMoney">{{ item.payerMoney|formatWalletTwo }}</div>
							</div>
							<div class="method" v-if="item.status && item.status == 'O'">
								<div class="type">订单额：</div>
								<div class="num" v-if="item.payerMoney">{{ item.payerMoney|formatWalletTwo }}</div>
							</div>
							<div class="method" style="align-items: center;">
								<div class="type">订单号：</div>
								<div class="num" v-if="item.sn" style="font-size: 24rpx;">{{ item.sn }}</div>
							</div>
							<div class="time" v-if="item.createTime">交易时间：{{ item.createTime }}</div>
						</div>
						<div class="right">
							<div class="money" v-if="item.payeeMoney">
								<span
									v-if="Number(item.payeeMoney)>0">+{{ Number(item.payeeMoney)|formatWalletTwo }}</span>
								<span v-else>{{ Number(item.payeeMoney)|formatWalletTwo }}</span>
							</div>
						</div>
					</div>
				</div>
				<uni-load-more v-if="shouyiarr.length > 0" :status="loadStatusshouyi"></uni-load-more>
			</div>
			<div class="extension-list" v-else>
				<view v-if="shouyiarr.length === 0">
					<u-empty text="暂无数据" mode="list">
					</u-empty>
				</view>
				<div v-else class="extension-item" v-for="item in shouyiarr" @click='monthCheck(item,1)'>
					<div class="body-wrapper">
						<div class="left">
							<div class="method">
								<div class="type">{{ item.time }}</div>
							</div>
						</div>
						<div class="right">
							<div class="money" v-if="item.payeeMoney">
								<span
									v-if="Number(item.payeeMoney)>0">+{{ Number(item.payeeMoney)|formatWalletTwo }}</span>
								<span v-else>{{ Number(item.payeeMoney)|formatWalletTwo }}</span>
							</div>
						</div>
						<u-icon class="next" name="arrow-right" font-size="32" color="#b9b9b9"></u-icon>
					</div>
				</div>
				<uni-load-more v-if="shouyiarr.length > 0" :status="loadStatusshouyi"></uni-load-more>
			</div>
		</view>
	</view>
</template>

<script>
	import {
		myExtension,
		getWallet,
		getYear,
		monthData,
		getDate,
		getList,
		memberList,
		profitList,
		getprofit,
		getcertificate,
		getunbind
	} from "@/api/partnerList";
	import {
		getUserInfo
	} from "@/api/members";
	import DrawPoster from "@/js_sdk/u-draw-poster";
	import storage from "@/utils/storage.js";
	import * as API_Trade from "@/api/trade";
	const TS = "https://rsyl.oss-cn-beijing.aliyuncs.com/bf0dff65ba064a5594be722622862d86.jpg"
	const SY = "https://rsyl.oss-cn-beijing.aliyuncs.com/02e00c38cbf043558d2f6cd75761fbd1.jpg"
	const CS = "https://rsyl.oss-cn-beijing.aliyuncs.com/fd08adeb7ea649d98a68d62763d01dfc.jpg"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				num: 1,
				memberparams: {
					pageNumber: 1,
					pageSize: 10,
					// sort: 'grade_asc',
					type: '',
					extension: ''
				},
				profitparams: {
					pageNumber: 1,
					pageSize: 10,
					// sort: 'grade_asc',
					type: 'day',
				},
				tabList: [{
					name: '授权证书',
				}, {
					name: '推广会员'
				}, {
					name: '我的收益'
				}, ],
				// 推广会员下拉框
				membersel: [],
				memberindex: 0,
				memberHide: true,
				huiyuanarr: [],
				loadStatus: 'more',
				loadStatusshouyi: 'more',
				tabCurrent: 0,
				shouyiarr: [],
				selectList: [{
						name: '今日',
						type: 'day'
					},
					{
						name: '本月',
						type: 'month'
					},
					{
						name: '年收益',
						type: 'year'
					}
				],
				selectCurrent: 0,
				selectListHide: true,
				inconmeData: null, // 总收益  今日总收益
				dynamicTitle: '',
				current: 0,
				userinfo: null,
				goodsHeight: "",
				loadingType: "more", //加载更多状态
				params: {
					pageNumber: 1,
					pageSize: 10,
					// sort: 'grade_asc',
				},
				list: [{
					cate_name: '年收益'
				}, {
					cate_name: '月收益'
				}, {
					cate_name: '日收益',
				}],
				currentParent: 0,
				tabParent: [{
					cate_name: '我的收益'
				}, {
					cate_name: '我的推广'
				}],
				listExtions: [],
				currentExtions: 0, //我的推广tab切换
				extensionArr: [], //我的推广
				promotionCode: '', //推广码
				yearDataList: [], //年收益
				monthDataList: [], //月收益
				dateData: [], //日收益
				username: '',
				beginyear: '',
				beginmouth: '',
				beginday: '',
				endyear: '',
				endmouth: '',
				endday: '',
				sunbind: 1,
				prefixCode: ''
			}
		},
		onReachBottom() {
			if (this.tabCurrent == 1) {
				this.memberList()
			} else if (this.tabCurrent == 2) {
				this.profitList()
			}
		},
		onShow() {
			this.userinfo = storage.getUserInfo()
			console.log(this.userinfo)
			if (this.userinfo.partnerType == 1) {
				this.membersel = [{
					name: 'B端',
					type: '2'
				}]
				this.memberparams.type = '2'
			} else if (this.userinfo.partnerType == 2) {
				this.membersel = [{
					name: 'C端',
					type: '1'
				}]
				this.memberparams.type = '1'
			} else if (this.userinfo.partnerType == 4) {
				this.membersel = [{
					name: 'C端',
					type: '1'
				}, {
					name: 'B端',
					type: '2'
				}, {
					name: '天使合伙人',
					type: '3'
				}, {
					name: '事业合伙人',
					type: '4'
				}]
				this.memberparams.type = '1'
			}
			this.memberparams.extension = this.userinfo.promotionCode
			// this.getunbind()
			// setTimeout(() => {
			// 	this.memberList()
			// }, 1000);
		},
		onLoad(options) {
			this.name = options.name
			uni.setNavigationBarTitle({
				title: options.name
			})
		},
		mounted() {
			// this.userinfo = storage.getUserInfo()
			this.getcertificate()
			// this.initDA() // 生成授权书
		},
		methods: {
			monthCheck(item, index) {
				this.shouyiarr = []
				this.profitparams.pageNumber = 1
				this.selectCurrent = index
				this.profitparams.month = item.time
				this.profitparams.type = this.selectList[index].type
				this.profitList()
				this.getprofit()
			},
			// 绑定提示
			getunbind() {
				let parse = {
					extension: this.memberparams.extension,
				}
				getunbind(parse).then((res) => {
					// console.log(res)
					if (res.data.code == 200) {
						if (res.data.result > 0) {
							uni.showModal({
								title: '绑定提示',
								content: '由于有' + res.data.result + '人没有消费记录，三天后将解除绑定关系！',
								confirmText: '已知晓',
								cancelText: '取消',
								success: data => {
									if (data.confirm) {
										this.sunbind = 2
									} else {
										this.sunbind = 2
									}
								}
							});
						}
					}
				});
			},
			// 推广会员下拉框
			memberType(index) {
				this.huiyuanarr = []
				this.memberparams.pageNumber = 1
				this.memberindex = index
				this.memberparams.type = this.membersel[index].type
				this.selectListHide = true
				this.memberList()
			},
			// 推广会员
			memberList() {
				this.memberparams.pageNumber = this.memberparams.pageNumber;
				memberList(this.memberparams).then((res) => {
					if (res.data.code == 200) {

						uni.stopPullDownRefresh();
						if (!res.data.success) {
							this.loadStatus = "noMore";
							return false;
						}
						let huiyuanarr = res.data.result.records;
						if (huiyuanarr.length == 0) {
							this.loadStatus = "noMore";
						} else if (huiyuanarr.length < 10) {
							this.loadStatus = "noMore";
						}
						if (huiyuanarr.length > 0) {
							this.huiyuanarr =
								this.huiyuanarr.concat(huiyuanarr);
							this.memberparams.pageNumber += 1;
						}
					}
				});
			},
			// 打电话
			daphone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				});
			},
			// 我的收益
			profitList() {
				this.profitparams.pageNumber = this.profitparams.pageNumber;
				profitList(this.profitparams).then((res) => {
					if (res.data.code == 200) {
						uni.stopPullDownRefresh();
						if (!res.data.success) {
							this.loadStatusshouyi = "noMore";
							return false;
						}
						let shouyiarr = res.data.result.records;
						if (shouyiarr.length == 0) {
							this.loadStatusshouyi = "noMore";
						} else if (shouyiarr.length < 10) {
							this.loadStatusshouyi = "noMore";
						}
						if (shouyiarr.length > 0) {
							this.shouyiarr =
								this.shouyiarr.concat(shouyiarr);
							this.profitparams.pageNumber += 1;
						}
					}
				});
			},
			// 我的收益下拉框
			selectType(index) {
				this.shouyiarr = []
				this.profitparams.pageNumber = 1
				this.selectCurrent = index
				this.profitparams.type = this.selectList[index].type
				this.profitparams.month = ''
				this.selectListHide = true
				this.profitList()
				this.getprofit()
			},
			// 打电话
			shouyiphone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				});
			},
			// 查询总收益
			getprofit() {
				let parse = {
					type: this.profitparams.type,
					month: this.profitparams.month
				}
				getprofit(parse).then((res) => {
					if (res.data.code == 200) {
						this.inconmeData = res.data.result
					}
				});
			},
			// 授权证书
			getcertificate() {
				getcertificate().then((res) => {
					if (res.data.code == 200) {
						this.username = res.data.result.username
						this.beginyear = res.data.result.beginTime.substring(0, 4)
						this.beginmouth = res.data.result.beginTime.substring(5, 7)
						this.beginday = res.data.result.beginTime.substring(8, 10)
						this.endyear = res.data.result.endTime.substring(0, 4)
						this.endmouth = res.data.result.endTime.substring(5, 7)
						this.endday = res.data.result.endTime.substring(8, 10)
						this.cyear = res.data.result.createTime.substring(0, 4)
						this.cmouth = res.data.result.createTime.substring(5, 7)
						this.cday = res.data.result.createTime.substring(8, 10)
						this.prefixCode = res.data.result.prefixCode
						this.initDA()
					}
				});
			},
			// tab切换
			tabListChange(index) {
				this.tabCurrent = index;
				if (index == 1) {
					this.memberparams.pageNumber = 1
					this.huiyuanarr = []
					this.memberList()
					if (this.sunbind == 1) {
						this.getunbind()
					}
				} else if (index == 2) {
					this.profitparams.pageNumber = 1
					this.shouyiarr = []
					this.profitList()
					this.getprofit()
				}
				//  else if (index == 2) {
				// 	this.initDA()
				// }
			},
			// 生成授权书
			async initDA() {
				const dp = await DrawPoster.build('canvassss')
				// 绘制背景与文字
				if (this.userinfo.partnerType == 1) {
					// 事业
					var {
						width,
						height,
						background
					} = {
						width: 300,
						height: 424,
						background: SY
					};
				} else if (this.userinfo.partnerType == 2) {
					// 天使
					var {
						width,
						height,
						background
					} = {
						width: 300,
						height: 424,
						background: TS
					};
				} else {
					// 城市
					var {
						width,
						height,
						background
					} = {
						width: 300,
						height: 424,
						background: CS
					};
				}
				dp.canvas.width = width
				dp.canvas.height = height
				dp.draw(async (ctx) => {
					await Promise.all([
						ctx.drawImage(
							background,
							0,
							0,
							width,
							height,
						)
					]);
				});
				dp.draw((ctx) => {
					ctx.font = '10px Arial'
					ctx.fillText(this.username, 83, 246)
				});
				dp.draw((ctx) => {
					ctx.font = '8px Arial'
					ctx.fillText(this.beginyear, 90, 290)
				});
				dp.draw((ctx) => {
					ctx.font = '8px Arial'
					ctx.fillText(this.beginmouth, 117, 290)
				});
				dp.draw((ctx) => {
					ctx.font = '8px Arial'
					ctx.fillText(this.beginday, 134, 290)
				});
				dp.draw((ctx) => {
					ctx.font = '8px Arial'
					ctx.fillText(this.endyear, 171, 290)
				});
				dp.draw((ctx) => {
					ctx.font = '8px Arial'
					ctx.fillText(this.endmouth, 201, 290)
				});
				dp.draw((ctx) => {
					ctx.font = '8px Arial'
					ctx.fillText(this.endday, 217, 290)
				});
				dp.draw((ctx) => {
					ctx.font = '8px Arial'
					ctx.fillText(this.cyear, 118, 363)
				});
				dp.draw((ctx) => {
					ctx.font = '8px Arial'
					ctx.fillText(this.cmouth, 147, 363)
				});
				dp.draw((ctx) => {
					ctx.font = '8px Arial'
					ctx.fillText(this.cday, 164, 363)
				});
				dp.draw((ctx) => {
					ctx.font = '10px Arial'
					ctx.fillText(this.prefixCode, 100, 390)
				});
				const result = await dp.awaitCreate();
				this.imgUrl = await dp.createImagePath();
			},
			// 详情页
			async getListData(item) {
				uni.navigateTo({
					url: `/pages/partner/partnerList/partnerDetail?time=${item.time}&income=${this.current}`,
				});
			},
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 2000)
		},
	}
</script>

<style lang="scss">
	.partner-extension-wrapper {
		min-height: 100vh;
		box-sizing: border-box;
		padding-top: 16upx;

		.content-wrapper {
			.vip-list {
				.vip-person {
					margin-top: 24upx;
					display: flex;
					padding: 24upx 32upx;
					align-items: center;
					background-color: #ffffff;

					.avatar {
						flex: 0 0 84upx;
						width: 84upx;
						height: 84upx;
					}

					.info-wrapper {
						flex: 1;
						padding: 0 16upx;

						.nickname {
							color: #9e7b28;
							font-size: 30u px;
						}

						.name-phone {
							margin-top: 4upx;
							color: #9c9c9c;
							font-size: 30upx;
							display: flex;
							align-items: center;

							.phone {
								margin-left: 12upx;
							}
						}

						.deathline {
							margin-top: 4upx;
							color: #ff7575;
							font-size: 24upx;
						}
					}

					.call {
						flex: 0 0 72upx;
						width: 72upx;
						height: 72upx;
					}

				}
			}

			.perview-wrapper {
				margin-top: 24upx;
				display: flex;
				justify-content: space-around;

				.item {
					position: relative;
					width: 300upx;
					height: 150upx;
					border-radius: 26upx;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.bg {
						position: absolute;
						z-index: 1;
						top: 0;
						left: 0;
						width: 300upx;
						height: 150upx;
					}

					.num,
					.text {
						position: relative;
						z-index: 10;
					}

					&.all {
						.num {
							color: #db211a;
							font-size: 40upx;
						}

						.text {
							margin-top: 12upx;
							color: #a85d5d;
							font-size: 28upx;

						}
					}

					&.day {
						.num {
							color: rgba(12, 83, 204, 1);
							font-size: 40upx;
						}

						.text {
							margin-top: 12upx;
							color: rgba(26, 102, 128, 1);
							font-size: 28upx;
						}
					}
				}
			}

			.select-type-wrapper {
				margin-top: 24upx;
				padding: 0 32upx;
				position: relative;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.selected-option {
					display: flex;
					justify-content: space-around;
					align-items: center;
					width: 200upx;
					height: 64upx;
					border: 2upx solid #dddddd;
					border-radius: 8upx;
					background-color: #ffffff;
					color: rgba(156, 156, 156, 1);
				}

				.total {
					color: rgba(36, 36, 36, 1);
					font-weight: bold;
					font-size: 36upx;
				}

				.select-list {
					position: absolute;
					top: 62upx;
					left: 32upx;
					width: 200upx;
					// height: 200upx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					text-align: center;
					background-color: #ffffff;
					border: 2upx solid #dddddd;
					overflow: hidden;
					box-sizing: border-box;
					opacity: 1;
					transition: height 0.3s;

					&.hide {
						height: 0;
						opacity: 0;
					}

					.select-item {
						height: 60upx;
						line-height: 60upx;
						width: 200upx;

						&.selected {
							color: rgb(0, 162, 255);
						}
					}
				}
			}

			.extension-list {
				.extension-item {
					margin-top: 24upx;
					background-color: #ffffff;

					.head-wrapper {
						padding: 0 32upx;
						height: 108upx;
						display: flex;
						align-items: center;
						border-bottom: 2upx solid #e8e8e8;

						.avatar {
							margin-right: 24upx;
							width: 72upx;
							height: 72upx;
						}

						.name {
							color: #9e7b28;
							font-size: 30upx;
						}

						.vip {
							margin: 0 16upx;
							color: #9e7b28;
							font-size: 30upx;
						}

						.phone {
							color: #9e7b28;
							font-size: 30upx;
						}
					}

					.body-wrapper {
						padding: 32upx;
						display: flex;
						align-items: center;

						.left {
							flex: 1;
							font-size: 30upx;

							.method {
								display: flex;
								color: #4a4a4a;

								.num {
									margin-left: 12upx;
								}
							}

							.time {
								margin-top: 16upx;
								color: #9c9c9c;
							}
						}

						.right {
							color: #1dbf2d;
							font-size: 36upx;
							font-weight: bold;
						}

						.next {
							margin-left: 12upx;
						}
					}
				}
			}

			.LA-wrapper {
				.canvas {
					position: fixed;
					top: 50%;
					left: 50%;
					width: 300px;
					height: 424px;
					transform: translate(-150px, -220px);
				}
			}
		}
	}
</style>
